<template>
	<view class="flex-col page">
		<MyHeader title="群详情"></MyHeader>
		<image class="self-center image_6" :src="hobbyObj.imageUrl" />
		<view class="flex-col self-stretch group_2">
			<view class="flex-col items-center self-stretch group_3">
				<text class="font text">点击打开二维码或者长按识别</text>
				<text class="mt-16 font_2 text_2">此群由网友提供，进群后如果有涉及金钱交易的请谨慎对待</text>
			</view>
			<view class="flex-col justify-start items-center self-center text-wrapper">
				<text class="font_2 text_3" @click="showModal">举报</text>
			</view>
		</view>
		<view class="flex-col self-stretch group_4">
			<text class="self-start text_4">发布信息</text>
			<view class="flex-col self-stretch section_4 mt-15">
				<view class="flex-col">
					<view class="flex-row justify-between">
						<text class="font text_5">名称</text>
						<text class="font text_6">{{hobbyObj.name}}</text>
					</view>
					<!-- <view class="flex-row justify-between items-baseline mt-21">
						<text class="font text_7">群号</text>
						<text class="font_3  ">{{hobbyObj.phone}}</text>
					</view> -->
					<view class="flex-row justify-between items-center mt-21">
						<text class="font text_9">发布时间</text>
						<text class="font  ">{{hobbyObj.createTime}}</text>
					</view>
					<view class="flex-row justify-between mt-21">
						<text class="font text_11">创建人</text>
						<text class=" ">{{hobbyObj.creator}}</text>
					</view>
				</view>
				<view class="mt-22 flex-row justify-between items-baseline">
					<text class="font">联系电话</text>
					<text class="font_3 text_13">{{hobbyObj.phone}}</text>
				</view>
			</view>
		</view>
		<up-modal :closeOnClickOverlay="true" :show="show" :title="title" @confirm="closeShow">
			<view class="slot-content">
				<view class="">
					联系人： 查志豪
				</view>
				<view class="">
					联系电话： 18550292337
				</view>
			</view>
		</up-modal>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref,
		computed,
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		getcirclesDetailAPI
	} from '@/apis/hobby.js'
	onLoad((options) => {
		console.log(options);
		getDetail(options.id)
	})
	const hobbyObj = ref({})
	const getDetail = async (id) => {

		const res = await getcirclesDetailAPI(id)
		console.log(res);
		hobbyObj.value = res.data
	}


	const show = ref(false)
	const title = ref('提示');
	const content = ref('联系人： 查志豪 联系电话： 18550292337 ');
	const showModal = async () => {
		show.value = true
	}
	const closeShow = () => {
		show.value = false
	}
</script>

<style scoped>
	.ml-5 {
		margin-left: 10rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	.mt-15 {
		margin-top: 30rpx;
	}

	.mt-21 {
		margin-top: 42rpx;
	}

	.page {
		padding-bottom: 242rpx;
		background-color: #f7f8fa;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section {
		padding: 0 12rpx 42rpx;
		background-image: linear-gradient(180deg, #4c8eef 0%, #84bbd900 100%);
	}

	.group {
		padding: 36rpx 16rpx 40rpx;
	}

	.image {
		width: 34rpx;
		height: 22rpx;
	}

	.image_2 {
		width: 30rpx;
		height: 22rpx;
	}

	.image_3 {
		width: 48rpx;
		height: 22.66rpx;
	}

	.section_2 {
		padding: 12rpx 24rpx;
		background-color: #ffffff99;
		border-radius: 50rpx;
		width: 174rpx;
		border-left: solid 1rpx #97979733;
		border-right: solid 1rpx #97979733;
		border-top: solid 1rpx #97979733;
		border-bottom: solid 1rpx #97979733;
	}

	.image-wrapper {
		width: 38rpx;
	}

	.image_5 {
		width: 38rpx;
		height: 14rpx;
	}

	.section_3 {
		background-color: #33333333;
		width: 1rpx;
		height: 37rpx;
	}

	.image_4 {
		width: 34rpx;
		height: 34rpx;
	}

	.image_6 {
		margin-top: 114rpx;
		border-radius: 12rpx;
		width: 336rpx;
		height: 336rpx;
	}

	.group_2 {
		margin-top: 48rpx;
		padding-left: 64rpx;
		padding-right: 60rpx;
	}

	.group_3 {
		padding-bottom: 36rpx;
	}

	.font {
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		line-height: 25.92rpx;
		color: #333333;
	}

	.text {
		color: #000000;
		line-height: 26.02rpx;
	}

	.font_2 {
		font-size: 24rpx;
		font-family: SourceHanSansCN;
		line-height: 22.48rpx;
	}

	.text_2 {
		color: #4c8eef;
		line-height: 22.94rpx;
	}

	.text-wrapper {
		padding: 12rpx 0;
		background-color: #4c8eef;
		border-radius: 8rpx;
		width: 112rpx;
	}

	.text_3 {
		color: #ffffff;
	}

	.group_4 {
		margin-top: 76rpx;
		padding: 0 30rpx;
	}

	.text_4 {
		margin-left: 12rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 30.14rpx;
	}

	.section_4 {
		padding: 40rpx 48rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.text_5 {
		line-height: 25.88rpx;
	}

	.text_6 {
		margin-right: 12rpx;
		line-height: 26.12rpx;
	}

	.text_7 {
		line-height: 25.82rpx;
	}

	.font_3 {
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		line-height: 22.48rpx;
		color: #333333;
	}

	.text_8 {
		margin-right: 44rpx;
		line-height: 21.26rpx;
	}

	.text_9 {
		line-height: 25.96rpx;
	}

	.text_10 {
		line-height: 34rpx;
		width: 239rpx;
	}

	.text_11 {
		line-height: 25.76rpx;
	}

	.text_12 {
		margin-right: 64rpx;
		line-height: 25.98rpx;
	}

	.text_13 {
		margin-right: 8rpx;
		line-height: 21.2rpx;
	}
</style>